import React, {Component} from 'react';
import {Menu, Dropdown, Icon, Tag, Popover, Button,message} from 'antd';
import TagButton from './tag';

require('./index.less');


export default class CustomDropdown extends Component {

  static defaultProps = {
    maxSelect:1000000
  };

  /***********************/
  /*父组件传值接口sectList*/
  /**********************/
  state = {
    selectList: [],
    tagList: [],
    selectedKeys: []
  };

  componentDidMount() {
    this.setState({selectList: this.props.sectList, selectedKeys: this.props.selectedKeys});
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {selectedKeys: nextProps.selectedKeys}
  }

  handleButtonSelect = e => {
    if (e.selectedKeys.length > this.props.maxSelect) {
      message.warning(`选中项最高不能超过${this.props.maxSelect}个`);
      return
    }
    this.setState({selectedKeys: e.selectedKeys});
    this.state.tagList.push(e.item.props.value);
    this.props.onChange(e.selectedKeys)
  };

  handleButtonDeSelect = e => {
    const {tagList} = this.state;
    tagList.splice(tagList.findIndex(item => item.id === e.key), 1);
    this.setState({selectedKeys: e.selectedKeys, tagList});
    this.props.onChange(e.selectedKeys,e.item.props.value.id,e.item.props.value.title)
  };

  handleShow = itemId => {
    let deValue = this.state.tagList
    let selKeys = this.state.selectedKeys
    deValue.splice(deValue.findIndex(item => item.id == itemId), 1)
    selKeys.splice(selKeys.findIndex(item => item.id == itemId), 1)
    this.setState({tagList: deValue, selectedKeys: selKeys})
  }

  render() {
    const menu = (
      <Menu selectedKeys={this.state.selectedKeys} multiple onSelect={this.handleButtonSelect}
            onDeselect={this.handleButtonDeSelect} style={{height: 200, overflowY: "auto"}}>
        {
          this.state.selectList.map((item, index) => (
            <Menu.Item value={item} key={item.id}>
              <a>{item.title}</a>
            </Menu.Item>
          ))
        }
      </Menu>
    );
    return (
      <div className="multi-select-box">

        <Popover overlayClassName='multi-select-popover' placement="bottomLeft" content={menu} trigger="click">
          <Button>选择参数</Button>
        </Popover>
      </div>
    )
  }
}
